<template>
    <div class="sub-div-center">
        <ul>
            <li>
                <img src="@/svg/phone.svg" />
                <span>
                    +86 176 8668 1788
                </span>
                <img src="@/svg/email.svg" />
                <span>info@sinotruksgroup.com</span>
        
                <img src="@/svg/whatsapp.svg" />
                <span>
                    +86 176 8668 1788
                </span>
                <img src="@/svg/address.svg" />
                <span>
                    No.7 Lanxiang Road, Tianqiao District, Jinan, China
                </span>
                <span>
                    <form action="#"><el-input v-model="inputValue" class="input" style="width: 240px" placeholder="search" :prefix-icon="Search" /></form>
                </span>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

let inputValue = ref("")

</script>
<style scoped>
ul {

    font-size: 0.8rem;
    margin-top: 2rem;
    letter-spacing: 1px;
    width: var(--content-width);
}

li {
    display: flex;
    height: 1.5rem;
    align-items: center;
}

img {
    height: 1rem;
    margin-right: 1rem;
    margin-left: 1rem;
}
.input {
    height: 1.8rem;
    margin-right: 1rem;
    margin-left: 1rem;
    --el-input-focus-border: var(--color-1);
    --el-input-focus-border-color: var(--color-1);
}
.inquire-btn{
    height:5rem; 
    width: 35vw;
    border-radius: 15px;
    border: 0px;
    margin: 2rem;
}
.message-box{
    width: 100%;
    height:75vh;
    background-color: red;
}
</style>